<template>
	<view class="login">
		<image class="img" :src="img"></image>
		<block v-if="state==='login'">
			<input type="text" placeholder="请输入用户名" v-model="username" class="input" />
			<input type="password" placeholder="请输入密码" v-model="password" class="input" />
			<button type="primary" class="btn" @click="login">登录</button>
			<button class="btn" @click="state='register'">没有账号?去注册</button>
		</block>
		<block v-if="state==='register'">

			<u-input placeholder="请输入邮箱" class="reg-input" border="none" clearable v-model="email">
				<u-text :text="'邮箱'" class="label" align="right" slot="prefix">
				</u-text>
			</u-input>

			<u-input placeholder="请输入密码" class="reg-input" border="none" clearable v-model="regPassword">
				<u-text text="密码" slot="prefix" class="label" align="right"></u-text>
			</u-input>


			<u-input placeholder="请输入用户名" class="reg-input" border="none" clearable v-model="regUsername">
				<u-text text="用户名" slot="prefix" class="label" align="right"></u-text>
			</u-input>

			<u-input placeholder="请输入昵称" class="reg-input" border="none" clearable v-model="nickname">
				<u-text text="昵称" slot="prefix" class="label" align="right"></u-text>
			</u-input>

			<u-input placeholder="请输入手机号" class="reg-input" border="none" clearable v-model="phoneNumber">
				<u-text :text="'手机号'" slot="prefix" class="label" align="right"></u-text>
			</u-input>

			<u-input placeholder="请输入验证码" class="reg-input" border="none" clearable v-model="code">
				<u-text text="验证码" slot="prefix" class="label" align="right"></u-text>
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒" @start="disabled=true"
						@end="disabled=false"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled"></u-button>
				</template>
			</u-input>

			<button type="primary" class="btn" @click="register">注册</button>

			<button class="btn" @click="state='login'">已有账号?去登录</button>
		</block>
	</view>
</template>

<script>
	import logo from '@/static/logo.png'
	import utils from "@/static/js/utils.js"
	import {
		mapMutations
	} from 'vuex' //引入mapGetters

	export default {
		data() {
			return {
				username: "",
				password: "",
				img: logo,
				state: "login",
				email: "",
				code: "",
				regPassword: "",
				regUsername: "",
				nickname: "",
				phoneNumber: "",
				tips: "发送验证码",
				disabled: false
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.email) {
					utils.http.get("/login/code", {
						email: this.email
					}).then(res => {
						if (res.status == 200) {
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast('验证码发送失败');
						}
					})
				} else {
					uni.$u.toast('邮箱填写不正确');
				}
			},
			register() {
				console.log(this.email)
				utils.http.get("/login/register", {
					email: this.email,
					code: this.code,
					username: this.regUsername,
					password: this.regPassword,
					nickname: this.nickname,
					phoneNumber: this.phoneNumber,
				}).then(res => {
					if (res.status == 200) {
						utils.http.setToken(res.data.token)
						utils.http.setExpireTime(res.data.expireTime)
						// globalData弃用,使用vuex替代
						// utils.globalData.setUserInfo(res.data.user)
						this.setUserInfo(res.data.user)
						uni.$u.toast('注册成功')
						uni.navigateBack()
					} else {
						uni.$u.toast('注册失败')
					}
				})
			},
			login() {
				utils.http.get("/login/newIn", {
					username: this.username,
					password: this.password
				}).then(res => {
					if (res.status == 200) {
						utils.http.setToken(res.data.token)
						utils.http.setExpireTime(res.data.expireTime)
						// globalData弃用,使用vuex替代
						// utils.globalData.setUserInfo(res.data.user)
						this.setUserInfo(res.data.user)
						uni.$u.toast('登录成功')
						uni.navigateBack()
					} else {
						uni.$u.toast('账号或密码错误')
					}
				})
			}

		}
	}
</script>

<style>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.img {
		width: 60px;
		height: 60px;
		border-radius: 50% 50%;
		margin-bottom: 10px;
		margin-top: 100px;
	}

	.input {
		width: 80%;
		margin: 10px 0;
		padding: 10px 10px;
	}

	.label {
		width: 60px;
		padding-right: 10px;
	}

	.reg-input {
		width: 80%;
		margin: 10px 0;
		padding: 10px 10px;
	}

	.btn {
		width: 80%;
		margin: 10px 0;
	}
</style>
